<template>
    <div class="proup" id="checkboxPP">
      <v-probox-common v-model="rel.property" :tips="false"></v-probox-common>
      <hr>
      <div class="ptem">
        <div class="i4d6 btn-group">
          <a class="btn btn-default" v-on:click="selected_level(i)" v-bind:class="{'active':selectedLevel==i}" v-for="(level,i) in rel.property.multiSelect.levels" >{{level}}</a>
        </div>
        <div class="i2d6 btn-group">
          <a class="btn btn-info" v-on:click="addLevel">&#10133;</a>
          <a class="btn btn-info" v-on:click="delLevel">&#10134;</a>
        </div>
      </div>
      <div class="ptem" v-show="selectedLevel>0">
        <div class="i2d6">
          <label>隶属于</label>
        </div>
        <div class="i4d6">
          <div class="i3d6" v-for="(level,i) in rel.property.multiSelect.levels" v-if="i<selectedLevel">
            <select v-on:change="change_select(i,$event)">
              <option v-for="option in rel.property.multiSelect.options" v-if="i==0" v-model="option.label">{{option.label}}</option>
              <option v-for="option in twoOptions" v-if="i==1" v-model="option.label">{{option.label}}</option>
            </select>
          </div>
        </div>
      </div>
      <div class="ptem">
        <div class="i3d6">
          <strong>选项内容</strong>
        </div>
        <div class="i3d6 tar">
          <a class="" v-on:click="multi_click">批量编辑</a>
        </div>
      </div>
      <v-probox-option-editor v-model="tempOption" v-on:say-options="sayOptions"></v-probox-option-editor>
      <v-probox-multi-option-editor :optionValue="optionValue" :show="showMultiEditor" v-on:close-editor="closeEditor" v-on:say-options="sayOptions"></v-probox-multi-option-editor>
      <hr>
      <v-probox-layout  v-model="rel.property"></v-probox-layout>
    </div>
</template>

<script>
import proboxCommon from './libs/pro-box-common'
import proboxLayout from './libs/pro-box-layout'
import proboxOptionEditor from './libs/pro-box-option-editor'
import proboxMultiOptionEditor from './libs/pro-box-multi-editor'
import Utils from '../../utils'

export default{
  props:["rel"],
  components:{
    'v-probox-layout':proboxLayout,
    'v-probox-common':proboxCommon,
    'v-probox-option-editor':proboxOptionEditor,
    'v-probox-multi-option-editor':proboxMultiOptionEditor
  },
  data:function(){
    return {
      optionValue:'',
      showMultiEditor:false,
      chineseNumner:['一级','二级','三级'],
      tempOption:this.initFirstOption(),
      selectedLevel:0,
      twoOptions:[],
      threeOptions:[],
      firstSelected:'',
      twoSelected:'' 
    }
  },
  methods:{
    initFirstOption:function(){
      var list = []
      for(var i=0;i<this.rel.property.multiSelect.options.length;i++){
        var option = this.rel.property.multiSelect.options[i]
        var optionObj = {label:option.label,value:option.label,parent:'',children:[]}
        list.push(optionObj)
      }
      return list
    },
    addLevel:function(){
      var levelLen = this.rel.property.multiSelect.levels.length
      if(levelLen<3){
        if(levelLen==1 && this.rel.property.multiSelect.options.length==0){
          alert('请先添加第一级数据')
          return ;
        }
        this.rel.property.multiSelect.levels.push(this.chineseNumner[levelLen])
        this.selected_level(levelLen)
      }
    },
    delLevel:function(){
      var levelLen = this.rel.property.multiSelect.levels.length
      if(levelLen>1){
        this.rel.property.multiSelect.levels.splice(levelLen-1,1)
        this.selected_level(levelLen-2)
      }
    },
    /**
     * 选择级别
     * @param {Object} level 当前级别
     */
    selected_level:function(level){
      this.selectedLevel=level
      this.tempOption.splice(0,this.tempOption.length)
      if(level ==0){
        this.tempOption = Utils.cloneArray(this.rel.property.multiSelect.options)
      }
      //默认选择第一个
      if(level == 1){
        if(this.rel.property.multiSelect.options.length>0){
          this.firstSelected=this.rel.property.multiSelect.options[0].label
          this.twoOptions=this.rel.property.multiSelect.options[0].children
          this.tempOption = Utils.cloneArray(this.twoOptions)
        }
      }
      
      if(level == 2){
        if(this.firstSelected.length==0 && this.rel.property.multiSelect.options.length>0){
          this.firstSelected=this.rel.property.multiSelect.options[0].label
        }
        var firstOption = this.findOption(this.rel.property.multiSelect.options,this.firstSelected)
        if(firstOption.children.length>0){
          this.twoSelected=firstOption.children[0].label
        }
        this.twoOptions=firstOption.children
      }
    },
    sayOptions:function(options){
      this.tempOption = Utils.cloneArray(options)
      //根据当前选择的级别添加选项
      if(this.selectedLevel == 0){
        this.rel.property.multiSelect.options=this.convertOptionObject('',options)
      }
      if(this.selectedLevel == 1){
        var firstOption = this.findOption(this.rel.property.multiSelect.options,this.firstSelected)
        firstOption.children=this.convertOptionObject(this.firstSelected,options)
      }
      if(this.selectedLevel == 2){
        var firstOption = this.findOption(this.rel.property.multiSelect.options,this.firstSelected)
        var twoOption = this.findOption(firstOption.children,this.twoSelected)
        twoOption.children=this.convertOptionObject(this.twoSelected,options)
      }
    },
    change_select:function(level,event){
      var value = event.target.value;
      var allOptions = this.rel.property.multiSelect.options;
      if(level==0){
        this.firstSelected = value
        var selectedOption = this.findOption(allOptions,value)
        this.twoOptions = selectedOption.children
        this.tempOption = Utils.cloneArray(this.twoOptions)
      }
      
      if(level == 1){
        this.twoSelected=value
        var firstOption = this.findOption(allOptions,this.firstSelected)
        var twoOption = this.findOption(firstOption.children,value)
        this.threeOptions=twoOption.children
        this.tempOption = Utils.cloneArray(this.threeOptions)
      }
      
    },
    
    findOption(options,label){
      var selectedOption = {children:[]}
      options.forEach(function(option,i){
        if(option.label==label){
          selectedOption = option
        }
      })
      return selectedOption
    },
    /**
     * 转换成多级选项对象 
     * {label:'aa',parent:'pp',children:[{label:'bb',parent:'aa',children:[]}]}
     * @param {Object} parentOption 父节点
     * @param {Object} options 选项集合
     */
    convertOptionObject:function(parentOption,options){
      var optionArray = []
      for(var i=0;i<options.length;i++){
        var option = options[i]
        var optionObj = {label:option.label,value:option.label,parent:parentOption,children:null}
        optionArray.push(optionObj)
      }
      return optionArray
    },
    closeEditor:function(close){
      this.showMultiEditor=close
    },
    multi_click:function(){
      this.optionValue = ''
      for(var i=0;i<this.tempOption.length;i++){
        if(i>0){
          this.optionValue += '\n'
        }
        this.optionValue += this.tempOption[i].label
      }
      this.showMultiEditor=true
    }
  }
}
</script>

<style>
</style>
